<template>
  <n-grid :cols="cols" x-gap="25" :collapsed="collapsed" :collapsed-rows="collapsedRows">
    <n-gi v-for="item, i in items" :span="item.attrs.span || 1">
      <ocean :use="item" :model="model" :path="path" />
    </n-gi>
  </n-grid>
</template>
<script lang="ts" setup>
import { computed,isRef } from 'vue';


interface Props {
  ocean: any,
  model: any,
  path?: string,
  cols?: string,
  collapsed?: boolean,
  collapsedRows?: number
}


const props = defineProps<Props>();
// const items = computed(() => props.ocean.items);
const items = computed(() => props.ocean.items.filter((item) => {
  const show = item.attrs.show;
  if (show != false) {
    if (isRef(show)) {
      return show.value
    }
    if (typeof show == 'function') {
      return show();
    }
    return true;
  }
}));

</script>